<template>
  <AppNavBar> 伊万图书 </AppNavBar>
  <!-- 轮播图 -->
  <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <swipe-item>
      <img src="../../assets/images/书1.jpg" alt="" />
    </swipe-item>
    <swipe-item>
      <img src="../../assets/images/书2.jpg" alt="" />
    </swipe-item>
    <swipe-item>
      <img src="../../assets/images/书3.jpeg" alt="" />
    </swipe-item>
  </swipe>
  <!-- 推荐列表 -->
  <h4>推荐列表</h4>
  <grid :column="4" v-if="goods.data">
    <grid-item
      v-for="good in goods.data.slice(0, 4)"
      :key="good.id"
      @click="$router.push(`/detail?id=${good.id}`)"
    >
      <Image width="60" height="80" :src="good.cover_url"></Image>
      <span style="font-size: 12px; height: 30px">{{ good.title }}</span>
    </grid-item>
  </grid>
  <!-- 分类tabs -->
  <Tabs
    color="#42b983"
    sticky
    offset-top="50px"
    v-if="goods.data"
    @scroll="tabsScroll"
  >
    <Tab title="畅销" name="sales">
      <GoodsList />
    </Tab>
    <Tab title="精选" name="recommend">
      <GoodsList :type="{ recommend: 1 }" />
    </Tab>
    <Tab title="新书" name="new"><GoodsList :type="{ new: 1 }" /></Tab>
  </Tabs>

  <AppBackToTop v-show="isFixed" />
</template>

<script>
import { ref } from 'vue'
import { getHomeData } from '@/api/home.js'
import { Swipe, SwipeItem, Grid, GridItem, Image, Tabs, Tab } from 'vant'
import GoodsList from './components/GoodsList.vue'
import AppBackToTop from '../../components/AppBackToTop'
import AppNavBar from '@/components/library/AppNavBar.vue'
export default {
  name: 'Home',
  components: { AppNavBar, Swipe, SwipeItem, Grid, GridItem, Image, Tabs, Tab, GoodsList, AppBackToTop },
  setup () {
    const goods = ref([])
    const tabs = ref([])
    const isFixed = ref(false)
    getHomeData().then(res => {
      goods.value = res.data.goods
      tabs.value = res.data.categories
    })

    const tabsScroll = (e) => {
      isFixed.value = e.isFixed
    }
    return {
      goods,
      tabs,
      tabsScroll,
      isFixed
    }
  }
}
</script>

<style lang='less'>
.my-swipe {
  text-align: center;
  margin-top: 50px;
  height: 30vh;
  img {
    width: 100vw;
  }
}
h4 {
  margin-top: 15px;
  padding-left: 15px;
}
.demo {
  height: 100000px;
}
</style>
